<template>
    <div class="bb">
        <p>-----setup子组件---</p>
        <p>PROPS数据-----{{reacp.data}}---{{reacp.msg}}</p>
        <p>本身数据----{{bs}}</p>
        <div>v-model----{{mo}}-----<button @click="change">改变</button></div>
        <button @click="top">发送事件</button>
        <button @click="col">改变颜色</button>
    </div>
</template>

<script setup lang='ts'>
  import {ref} from 'vue'


  let props=defineProps({
      reacp:{type:Object},
      mo:{type:String}
  })
  let color=ref('#564853')
  function col(){
      color.value='#'+ Math.random().toString(16).slice(2,8)
  }
  let emits=defineEmits(['fromson','update:mo'])

  function top(){
      emits('fromson','来自son数据')
  }
  function add(){
      bs.value++
  }
  
  function change(){
      emits('update:mo',props.mo+'数据改变+1')
  }

  let bs=ref(1)
  defineExpose({
      bs,
      add:add
  })
</script>

<style scoped lang='less'>
.bb{
    width: 60%;
    padding: 20px 30px;
    border:1px solid v-bind(color);
}
</style>